import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import './index.less';
import {
  useHistory,
  useLocation,
  MemoryRouter as Router,
  Switch,
} from 'react-router-dom';
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
  FileOutline,
} from 'antd-mobile-icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
export default (props: any) => {
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/todo',
      title: '本地商家',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  const history = useHistory();
  const location = useLocation();
  const { pathname } = location;
  const setRouteActive = (value: string) => {
    history.push(value);
  };
  const routerType = {
    POP: 'back',
    PUSH: 'dg',
    REPLACE: 'dg',
  };
  return (
    <div className="app">
      <div className="body">
        <TransitionGroup
          className="transition_wrapper"
          style={{ width: '100%', height: '100%' }}
          childFactory={(child) =>
            React.cloneElement(child, {
              classNames: routerType[history.action],
            })
          }
        >
          <CSSTransition key={props.location.pathname} appear timeout={1000}>
            {props.children}
          </CSSTransition>
        </TransitionGroup>
      </div>
      <div className="bottom">
        <TabBar
          activeKey={pathname}
          onChange={(value: any) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};
